<!-- 令牌购买 -->
<template>
  <div class="pag" >
      <cube-popup type="my-popup" v-show="showNotice" ref="upgradeMember" maskClosable>
          <div class="active-ct">
              <div class="upgrade-member">
                  <h1 v-if="isAbleDelete">矿工 {{nickname}} 已满足删除条件，可无条件删除该矿工</h1>
                  <!--<h2 v-if="isAbleDelete">可无条件删除该矿工</h2>-->
                  <h2 v-if="!isAbleDelete" :class="{'unable-delete': !isAbleDelete}">矿工 {{nickname}} 未满足删除条件</h2>
                  <h3 :class="{'selected': joinTimeCondition == 0}">1.矿工已加入节点超过7天；</h3>
                  <h3 :class="{'selected': averageIncomeCondition == 0}">2.该矿工所有节点的平均收益，低于该超级节点旗下所有矿工节点的平均收益；</h3>
                  <h3 :class="{'selected': nodeNumCondition == 0}">3.超级节点旗下节点数超过1900；</h3>
                  <div class="delete-cost" v-if="!isAbleDelete">
                      <h4>如强制删除，需支付</h4>
                      <h5>{{20 * minerDepositNodeNum}}CVNT</h5>
                      <p>（20CVNT*{{minerDepositNodeNum}}个节点）</p>
                  </div>
                  <div class="submit-btn">
                      <span v-if="isAbleDelete" @click="confirmDelete">确认删除</span>
                      <span v-else @click="forceDelete">强制删除</span>
                      <span @click="cancel">我再想想</span>
                  </div>
              </div>
          </div>
      </cube-popup>
      <cube-scroll v-show="tab == 0" ref="scroll" :data="offerList" :options="options" @pulling-up="onPullingUp" @scroll="pageScroll" :scrollEvents="['scroll']">
          <div class="top-info">
              <div class="token-title">
                  <div class="miner-info">
                      <h2>{{nickname}}</h2><p>{{joinTime}} 加入</p>
                  </div>
                  <h3>uid: {{minerUid}}</h3>
                  <!--<h1>该矿工最多可开设 {{maxNodeNum}} 个节点<span @click="addMinerNodeNum">增加</span></h1>-->
              </div>
              <div class="action-btn">
                  <div class="action-delete" @click="openDeleteModal">删除此矿工</div><div class="line">&nbsp;</div><div class="action-delete" v-show="!setTop" @click="confirmMinerTop">置顶此矿工</div><div class="action-delete" v-show="setTop" @click="deleteMinerTop">取消置顶</div>
              </div>
          </div>
          <div class="scroll-area">
              <div class="mining-type">
                  <span @click="chooseType(0)" :class="{'selected': tab == 0}">Linux({{linuxNum}})</span><span @click="chooseType(1)" :class="{'selected': tab == 1}">路由器({{routerNum}})</span><span @click="chooseType(2)" :class="{'selected': tab == 2}">客户端({{clientNum}})</span>
              </div>
              <div class="mining-detail">
                  <span>节点名称</span><span>昨日分红</span><span>累计分红</span>
              </div>
              <div class="code-content">
                  <div class="scroll-list-wrap" v-show="offerList && offerList.length > 0">
                      <!--<cube-scroll>--><!-- @pulling-down="onPullingDown"-->
                      <div class="code-item" v-for="(item, index) in offerList">
                          <div class="detail">
                              <div>
                                  <p>{{item.name}}</p>
                              </div>
                              <div>
                                  <p>{{item.yesterdayCvnt}}CVNT</p>
                              </div>
                              <div>
                                  <p>{{item.totalCvnt}}CVNT</p>
                              </div>
                          </div>
                      </div>
                      <!--</cube-scroll>-->
                  </div>
                  <div class="no-result-wrapper" v-if="offerList && offerList.length == 0">
                      <h2 class="no-result">
                          <img src="~assets/images/miningBoard/unstarted.png" alt="">
                          暂无明细
                      </h2>
                  </div>
              </div>
          </div>
      </cube-scroll>
      <cube-scroll v-show="tab == 1" ref="scroll1" :data="offerList1" :options="options1" @pulling-up="onPullingUp1" @scroll="pageScroll" :scrollEvents="['scroll']">
          <div class="top-info">
              <div class="token-title">
                  <div class="miner-info">
                    <h2>{{nickname}}</h2><p>{{joinTime}} 加入</p>
                  </div>
                  <h3>uid: {{minerUid}}</h3>
                  <!--<h1>该矿工最多可开设 {{maxNodeNum}} 个节点<span @click="addMinerNodeNum">增加</span></h1>-->
              </div>
              <div class="action-btn">
                  <div class="action-delete" @click="openDeleteModal">删除此矿工</div><div class="line">&nbsp;</div><div class="action-delete" v-show="!setTop" @click="confirmMinerTop">置顶此矿工</div><div class="action-delete" v-show="setTop" @click="deleteMinerTop">取消置顶</div>
              </div>
          </div>
          <div class="scroll-area">
              <div class="mining-type">
                  <span @click="chooseType(0)" :class="{'selected': tab == 0}">Linux({{linuxNum}})</span><span @click="chooseType(1)" :class="{'selected': tab == 1}">路由器({{routerNum}})</span><span @click="chooseType(2)" :class="{'selected': tab == 2}">客户端({{clientNum}})</span>
              </div>
              <div class="mining-detail">
                  <span>节点名称</span><span>昨日分红</span><span>累计分红</span>
              </div>
              <div class="code-content">
                  <div class="scroll-list-wrap" v-show="offerList1 && offerList1.length > 0">
                      <!--<cube-scroll>--><!-- @pulling-down="onPullingDown"-->
                      <div class="code-item" v-for="(item, index) in offerList1">
                          <div class="detail">
                              <div>
                                  <p>{{item.name}}</p>
                              </div>
                              <div>
                                  <p>{{item.yesterdayCvnt}}CVNT</p>
                              </div>
                              <div>
                                  <p>{{item.totalCvnt}}CVNT</p>
                              </div>
                          </div>
                      </div>
                      <!--</cube-scroll>-->
                  </div>
                  <div class="no-result-wrapper" v-if="offerList1 && offerList1.length == 0">
                      <h2 class="no-result">
                          <img src="~assets/images/miningBoard/unstarted.png" alt="">
                          暂无明细
                      </h2>
                  </div>
              </div>
          </div>
      </cube-scroll>
      <cube-scroll v-show="tab == 2" ref="scroll2" :data="offerList2" :options="options2" @pulling-up="onPullingUp2" @scroll="pageScroll" :scrollEvents="['scroll']">
          <div class="top-info">
              <div class="token-title">
                  <div class="miner-info">
                      <h2>{{nickname}}</h2><p>{{joinTime}} 加入</p>
                  </div>
                  <h3>uid: {{minerUid}}</h3>
                  <!--<h1>该矿工最多可开设 {{maxNodeNum}} 个节点<span @click="addMinerNodeNum">增加</span></h1>-->
              </div>
              <div class="action-btn">
                  <div class="action-delete" @click="openDeleteModal">删除此矿工</div><div class="line">&nbsp;</div><div class="action-delete" v-show="!setTop" @click="confirmMinerTop">置顶此矿工</div><div class="action-delete" v-show="setTop" @click="deleteMinerTop">取消置顶</div>
              </div>
          </div>
          <div class="scroll-area">
              <div class="mining-type">
                  <span @click="chooseType(0)" :class="{'selected': tab == 0}">Linux({{linuxNum}})</span><span @click="chooseType(1)" :class="{'selected': tab == 1}">路由器({{routerNum}})</span><span @click="chooseType(2)" :class="{'selected': tab == 2}">客户端({{clientNum}})</span>
              </div>
              <div class="mining-detail">
                  <span>节点名称</span><span>昨日分红</span><span>累计分红</span>
              </div>
              <div class="code-content">
                  <div class="scroll-list-wrap" v-show="offerList2 && offerList2.length > 0">
                      <!--<cube-scroll>--><!-- @pulling-down="onPullingDown"-->
                      <div class="code-item" v-for="(item, index) in offerList2">
                          <div class="detail">
                              <div>
                                  <p>{{item.name}}</p>
                              </div>
                              <div>
                                  <p>{{item.yesterdayCvnt}}CVNT</p>
                              </div>
                              <div>
                                  <p>{{item.totalCvnt}}CVNT</p>
                              </div>
                          </div>
                      </div>
                      <!--</cube-scroll>-->
                  </div>
                  <div class="no-result-wrapper" v-if="offerList2 && offerList2.length == 0">
                      <h2 class="no-result">
                          <img src="~assets/images/miningBoard/unstarted.png" alt="">
                          暂无明细
                      </h2>
                  </div>
              </div>
          </div>
      </cube-scroll>
      <div class="backtop" v-show="showBackTop" @click.stop="backToTop">
          <img src="~assets/images/miningboard/back-top.png" alt="" >
      </div>
      <div class="mask" v-show="showMask" @click="closeMask($event)" @touchmove.prevent>
          <div ref="maskContent">
              <transition name="fade">
                  <div class="general-height id-check" v-if="showAdd">
                      <h3 class="title check-title">增加此矿工可开启节点</h3>
                      <div class="check-content">
                          <p>矿工可开设节点数目只可增加不可减少</p>
                          <p>请酌情设置</p>
                          <div class="node-number-input">
                            <input placeholder="请输入您要为其增加的节点数" type="number" v-model="addNodeNum" />
                          </div>
                          <h4 @click.stop.prevent="confirmAddMinerNodeNum" class="finish-btn" :class="{'success': addNodeNum > 0}">确定</h4>
                      </div>
                  </div>
              </transition>
              <div class="general-height pay-password" v-if="showPay">
                  <h3 class="title">请输入支付密码完成支付</h3>
                  <div class="password-wrapper">
                      <span><strong v-if="password.num1 >= 0"></strong></span>
                      <span><strong v-if="password.num2 >= 0"></strong></span>
                      <span><strong v-if="password.num3 >= 0"></strong></span>
                      <span><strong v-if="password.num4 >= 0"></strong></span>
                      <span><strong v-if="password.num5 >= 0"></strong></span>
                      <span><strong v-if="password.num6 >= 0"></strong></span>
                  </div>
                  <!--<div class="forget-password" @click="getPwd">忘记密码?</div>-->
                  <div class="number-group">
                      <div class="number-btn">
                          <div @click.stop.prevent="chooseNum(1)">1</div><div @click.stop.prevent="chooseNum(2)">2</div><div @click.stop.prevent="chooseNum(3)">3</div>
                      </div>
                      <div class="number-btn">
                          <div @click.stop.prevent="chooseNum(4)">4</div><div @click.stop.prevent="chooseNum(5)">5</div><div @click.stop.prevent="chooseNum(6)">6</div>
                      </div>
                      <div class="number-btn">
                          <div @click.stop.prevent="chooseNum(7)">7</div><div @click.stop.prevent="chooseNum(8)">8</div><div @click.stop.prevent="chooseNum(9)">9</div>
                      </div>
                      <div class="number-btn">
                          <div class="no-num"></div><div @click.stop.prevent="chooseNum(0)">0</div><div class="no-num" @click.stop.prevent="deletePwd"><img src="~assets/images/del.png" /></div>
                      </div>
                  </div>
                  <div class="pay-loading" v-show="showPayLoading">
                      <div class="paying">
                          <img src="~assets/images/paying.gif" />
                          <span>正在支付</span>
                      </div>
                  </div>
              </div>
              <transition name="fade">
                  <div class="general-height id-check" :class="{'adjust-bottom': showAdjust}" v-if="showIdCheck">
                      <h3 class="title check-title">请输入短信验证码验证身份</h3>
                      <div class="check-content">
                          <p>需要通过绑定的手机 {{starPhone}}</p>
                          <p>进行身份验证以确保账户的资金安全</p>
                          <div class="sms-input">
                              <input placeholder="请输入接收到的验证码" type="number" v-model="verificationCode" /><span @click.stop.prevent="getVerifyCode" style="background:rgba(23,62,143,1);" v-if="showFlag">发送验证码</span><span v-else>重新发送 {{countdown}}s</span>
                          </div>
                          <h4 @click.stop.prevent="finishVerification" class="finish-btn" :class="{'success': verificationCode.length == 4}">完成验证</h4>
                      </div>
                  </div>
              </transition>
          </div>
      </div>
  </div>

</template>

<script>
  import md5 from 'js-md5';
  import 'common/js/gt';
  import {addMinerNodeNum, minerNodeCount, minerIncomeDetailList, userTokenInfo, tokenTradeList, putMinerTop, cancelMinerTop,
    checkAgentPayPassword, tokenGeetestInit, tokenGetCode, deleteCondition, removeMiner} from 'api/register'

  export default {
    components: {

    },
    data() {
      return {
        joinTimeCondition: 0,
        averageIncomeCondition: 0,
        nodeNumCondition: 0,
        minerDepositNodeNum: 0,
        setTop: false,
        nickname: '--',
        joinTime: '--',
        minerUid: '--',
        maxNodeNum: 0,
        linuxNum: 0,
        routerNum: 0,
        clientNum: 0,
        tab: 0,
        addNodeNum: '',
        stepBtnOne: true,
        showBackTop: false,
        isIOS: false,
        showAdjust: false,
        showNotice: false,
        isAbleDelete: '',
        current: 1,
        offerList: null,
        offerList1: null,
        offerList2: null,
        /*offerList: [],*/
        options: {
          click: true,
          tap: true,
          pullUpLoad: true/*,
          pullDownRefresh: {
            threshold: 90,
            stop: 50,
            txt: '刷新成功'
          }*/
        },
        options1: {
          click: true,
          tap: true,
          pullUpLoad: true/*,
          pullDownRefresh: {
            threshold: 90,
            stop: 50,
            txt: '刷新成功'
          }*/
        },
        options2: {
          click: true,
          tap: true,
          pullUpLoad: true/*,
          pullDownRefresh: {
            threshold: 90,
            stop: 50,
            txt: '刷新成功'
          }*/
        },
        showMask: false,
        showAdd: false,
        showPay: false,
        payPassword: '',
        payPwd: '',
        password: {
          num1: -1,
          num2: -1,
          num3: -1,
          num4: -1,
          num5: -1,
          num6: -1
        },
        showPayLoading: false,
        showIdCheck: false,
        countdown: 60,
        verificationCode: '',
        phone: '',
        starPhone: '',
        showFlag: true,
        u: '',
        need_code: 1,
        captchaObj: '',
        scene: 'deleteMiner',
        payStatus: 1,
        per: 20,
        page: 1,
        page1: 1,
        page2: 1,
        source: 1,    // linux
        source1: 2,   // router
        source2: 3,   // pcClient
        sw: true,
        sw1: true,
        sw2: true
      }
    },
    beforeRouteEnter (to, from, next) {
      next((vm) => {
        let query = to.query;
        Object.assign(vm, query);
        console.log(query);
        vm.tab = 0;
        vm.phone = query.phone;
        vm.area = query.area;
        vm.starPhone = vm.phone.substr(0, 3) + '****' + vm.phone.substr(7);
        vm.nickname = query.nickname;
        vm.joinTime = query.createTime;
        // vm.maxNodeNum = query.maxNodeNum;
        vm.minerUid = query.uid;
        vm.linuxNum = query.linuxNum;
        vm.routerNum = query.routerNum;
        vm.clientNum = query.pcNum;
        vm.setTop = query.setTop;
        vm.page = 1;
        vm.sw = true;
        vm.options.pullUpLoad = true;
        vm.page1 = 1;
        vm.sw1 = true;
        vm.options1.pullUpLoad = true;
        vm.page2 = 1;
        vm.sw2 = true;
        vm.options2.pullUpLoad = true;
        vm.setNormalStatus();
        // vm.getMinerNodeCount();
        vm.getLinuxNodeList();
        vm.getRouterNodeList();
        vm.getClientNodeList();
      })
    },
    mounted() {
      let u = navigator.userAgent;
      // console.log(u);
      this.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      //console.log(this.isIOS);
      const h = document.body.scrollHeight;
      const H = window.innerHeight;
      // console.log(h);
      if (this.isIOS) {
        document.body.addEventListener('focusin', () => {
          this.showAdjust = true;
        })
        document.body.addEventListener('focusout', () => {
          this.showAdjust = false;
        })
      } else {
        /*window.addEventListener('resize', () => {
          if (window.innerHeight < H) {
            this.stepBtnOne = false;
          } else {
            this.stepBtnOne = true;
          }
        })*/

        window.onresize = function() {
          if (document.body.scrollHeight < h) {
            this.showAdjust = true;
          } else {
            this.showAdjust = false;
          }
        }
      }
      this.getRegister_ini();

    },
    watch: {
      'password.num6': {
        handler(newVal, oldVal) {
          if (newVal >= 0 && this.payPwd.length == 6) {
            // console.log(this.payPwd);
            this.payPassword = md5(this.payPwd);
            // console.log(this.payPassword);
            setTimeout(() => {
              this.verifyPayPassword();
            }, 50);
          }
        },
        immediate: true,
        deep: true
      }
    },
    beforeDestroy() {
      let setIntervalCountdown = window['setIntervalCountdown'];
      clearInterval(setIntervalCountdown);
      window['setIntervalCountdown'] = null;
    },
    methods: {
      setNormalStatus() {
        this.showAdjust = false;
        this.showNotice = false;
        this.showMask = false;
        this.showPayLoading = false;
        this.verificationCode = '';
        this.showAdd = false;
        this.showPay = false;
        this.showIdCheck = false;
        /*关闭弹框时将当前已经输入的支付密码清空*/
        this.password = {
          num1: -1,
          num2: -1,
          num3: -1,
          num4: -1,
          num5: -1,
          num6: -1
        };
        this.payPwd = '';
        this.payPassword = '';
        this.countdown = 60;
        this.cancelSetIntervalCountdown();
        this.showFlag = true;
      },
      chooseType(val) {
        this.tab = val;
      },
      getMinerNodeCount() {
        minerNodeCount(this.minerUid).then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
            this.linuxNum = data.data.linux;
            this.routerNum = data.data.router;
            this.clientNum = data.data.pc;
            // this.maxNodeNum = data.data.linux + data.data.pc + data.data.router;
          }
        }).catch((err) => {
          this.showToast(err.info, 'warn');
        })
      },
      getLinuxNodeList() {
        minerIncomeDetailList(this.minerUid, this.source, this.page, this.per).then((data) => {
          // console.log(data);
          if (data.data && data.data.length > 0) {
            this.offerList = data.data
          }
          if (!data.data || data.data == null || data.data.length == 0) {
            this.offerList = [];
          }
        }).catch((err) => {
          this.showToast(err.info, 'warn');
        })
      },
      getRouterNodeList() {
        minerIncomeDetailList(this.minerUid, this.source1, this.page1, this.per).then((data) => {
          // console.log(data);
          if (data.data && data.data.length > 0) {
            this.offerList1 = data.data
          }
          if (!data.data || data.data == null || data.data.length == 0) {
            this.offerList1 = [];
          }
        }).catch((err) => {
            this.showToast(err.info, 'warn');
        })
      },
      getClientNodeList() {
        minerIncomeDetailList(this.minerUid, this.source2, this.page2, this.per).then((data) => {
          // console.log(data);
          if (data.data && data.data.length > 0) {
            this.offerList2 = data.data
          }
          if (!data.data || data.data == null || data.data.length == 0) {
            this.offerList2 = [];
          }
        }).catch((err) => {
            this.showToast(err.info, 'warn');
        })
      },
      confirmAddMinerNodeNum() {
        let reg = /^[0-9]+$/;
        if (this.addNodeNum <= 0 || !reg.test(this.addNodeNum)) {/*  || this.addNodeNum > this.maxNodeNum */
          this.showToast('请输入大于0的正整数!', 'warn');
          return;
        }
        if (this.isSending) {
          return;
        }
        this.isSending = true;
        addMinerNodeNum(this.minerUid, this.addNodeNum).then((data) => {
          // console.log(data);
          this.isSending = false;
          // this.maxNodeNum = Number(this.maxNodeNum) + Number(this.addNodeNum);
          this.showMask = false;
          this.showAdd = false;
          this.addNodeNum = '';
          this.showToast('节点数量增加成功！', 'correct');
        }).catch((err) => {
          this.isSending = false;
          this.showToast(err.info, 'warn');
        })
      },
      confirmMinerTop() {
        if (this.isSetting) {
          return;
        }
        this.isSetting = true;
        putMinerTop(this.minerUid).then((data) => {
          // console.log(data);
          this.isSetting = false;
          this.setTop = !this.setTop;
          this.showToast('置顶成功！', 'correct');
        }).catch((err) => {
          this.isSetting = false;
          this.showToast(err.info, 'warn');
        })
      },
      deleteMinerTop() {
        if (this.isDeleting) {
          return;
        }
        this.isDeleting = true;
        cancelMinerTop(this.minerUid).then((data) => {
          // console.log(data);
          this.isDeleting = false;
          this.setTop = !this.setTop;
          this.showToast('取消置顶成功！', 'correct');
        }).catch((err) => {
          this.isDeleting = false;
          this.showToast(err.info, 'warn');
        })
      },
      inputFocus() {
        setTimeout(function(){
          window.scrollTo(0,document.body.clientHeight);
        }, 500);
      },
      backToTop() {
        this.$refs.scroll.scrollTo(0,0,2000);
      },
      pageScroll({y}) {
        if(y < -380){
          this.showBackTop = true
        }else{
          this.showBackTop = false
        }
      },
      onPullingDown() {
        // this.offerList = [];
        this.page = 1;
        this.sw = true;
        this.options.pullUpLoad = true;
        this.getUserTokenInfo();
        this.getTokenTradeList();
      },
      onPullingUp() {
        this.page++;
        if (this.sw) {
          minerIncomeDetailList(this.minerUid, this.source, this.page, this.per).then((data) => {
            if (data.data && data.data.length > 0) {
              this.offerList = this.offerList.concat(data.data);
              this.sw = true;
            }
            if (!data.data || data.data == null || data.data.length == 0) {
              this.sw = false;
              this.options.pullUpLoad = false;
              return;
            }
          }).catch((err) => {
            this.showToast(err.info, 'warn');
          })
        }
      },
      onPullingUp1() {
        this.page1++;
        if (this.sw1) {
          minerIncomeDetailList(this.minerUid, this.source1, this.page1, this.per).then((data) => {
            if (data.data && data.data.length > 0) {
              this.offerList1 = this.offerList1.concat(data.data);
              this.sw1 = true;
            }
            if (!data.data || data.data == null || data.data.length == 0) {
              this.sw1 = false;
              this.options1.pullUpLoad = false;
              return;
            }
          }).catch((err) => {
              this.showToast(err.info, 'warn');
          })
        }
      },
      onPullingUp2() {
        this.page2++;
        if (this.sw2) {
          minerIncomeDetailList(this.minerUid, this.source2, this.page2, this.per).then((data) => {
            if (data.data && data.data.length > 0) {
              this.offerList2 = this.offerList2.concat(data.data);
              this.sw2 = true;
            }
            if (!data.data || data.data == null || data.data.length == 0) {
              this.sw2 = false;
              this.options2.pullUpLoad = false;
              return;
            }
          }).catch((err) => {
              this.showToast(err.info, 'warn');
          })
        }
      },


      addMinerNodeNum() {
        this.showMask = true;
        this.showAdd = true;
      },

      closeMask(ev) {
        if (!this.$refs.maskContent.contains(ev.target)) {
          this.showMask = false;
          this.showAdd = false;
          this.showPay = false;
          this.showIdCheck = false;
          /*关闭弹框时将当前已经输入的支付密码清空*/
          this.password = {
            num1: -1,
            num2: -1,
            num3: -1,
            num4: -1,
            num5: -1,
            num6: -1
          };
          this.payPwd = '';
          this.payPassword = '';
          this.countdown = 60;
          this.cancelSetIntervalCountdown();
          this.showFlag = true;
        }
      },
      cancelSetIntervalCountdown() {
        let setIntervalCountdown = window['setIntervalCountdown'];
        clearInterval(setIntervalCountdown);
        window['setIntervalCountdown'] = null;
      },
      startCountDown() {
        this.showFlag = false;
        let setIntervalCountdown = window['setIntervalCountdown'];
        if (setIntervalCountdown) {
          clearInterval(setIntervalCountdown);
          window['setIntervalCountdown'] = null;
        }
        window['setIntervalCountdown'] = setInterval(() => {
          this.countdown--;
        if (this.countdown <= 0) {
          this.cancelSetIntervalCountdown();
          this.countdown = 60;
          this.showFlag = true;
        }
      }, 1000);
      },
      verifyPayPassword() {
        this.showPayLoading = true;
        checkAgentPayPassword({uid: '', password: this.payPassword,  scene: this.scene}).then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
            this.u = data.data.u;
            this.need_code = data.data.need_code;
            if (this.need_code == 1) {
              setTimeout(() => {
                this.showPayLoading = false;
                this.showPay = false;
                this.showIdCheck = true;
                /* this.showMask = false; */
              }, 500);
            } else if (this.need_code == 0) {
              setTimeout(() => {
                this.showPayLoading = false;
                this.showPay = false;
                this.finishVerification();
              }, 500);
            }
          /*setTimeout(() => {
            const toast = this.$createToast({
              time: 1000,
              txt: '支付密码验证成功',
              type: 'correct'
            });
            toast.show();
          }, 300);*/

        }
      }).catch((error) => {
          // console.log(error);
          if (error.status && error.status != 1) {
            setTimeout(() => {
              this.showToast(error.info, 'warn');
            }, 500)
          }
          setTimeout(() => {
            this.showPayLoading = false;
          }, 500)
        })
        /*验证支付密码成功或者失败后将当前已经输入的支付密码清空*/
        this.password = {
          num1: -1,
          num2: -1,
          num3: -1,
          num4: -1,
          num5: -1,
          num6: -1
        };
        this.payPwd = '';
        this.payPassword = '';
      },
      finishVerification() {
        if (this.need_code == 1) {
          if (this.verificationCode == '') {
            this.showToast('请输入短信验证码', 'warn');
            return;
          }
        }
        if (this.isSubmiting) {
          return;
        }
        // let postData;
        if (this.need_code == 1) {
          /*postData = {
            orderNo: this.confirmDetail.orderNo,
            code: this.verificationCode,
            u: this.u
          };*/
        } else {
          this.verificationCode = '';
          /*postData = {
            orderNo: this.confirmDetail.orderNo,
            code: '',
            u: this.u
          };*/
        }
        this.isSubmiting = true;
        removeMiner(this.minerUid, this.verificationCode).then((data) => {
          // console.log(data);
          this.isSubmiting = false;
          this.showToast('删除成功！', 'correct');
          this.verificationCode = '';
          this.showIdCheck = false;
          this.showMask = false;
          this.showFlag = true;
          this.cancelSetIntervalCountdown();
          this.countdown = 60;
          setTimeout(() => {
            this.$router.back();
          }, 50)
        }).catch((err) => {
          this.isSubmiting = false;
          if (this.need_code == 0) {
            this.showMask = false;
          }
          this.showToast(err.info, 'warn');
        })
      },
      chooseNum(val) {
        // console.log(this.payPwd.length);
        if (this.payPwd.length == 0) {
          this.password.num1 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 1) {
          this.password.num2 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 2) {
          this.password.num3 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 3) {
          this.password.num4 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 4) {
          this.password.num5 = val;
          this.payPwd += val;
        } else if (this.payPwd.length == 5) {
          this.password.num6 = val;
          this.payPwd += val;
        }
        // console.log(this.payPwd);
      },
      deletePwd() {
        // console.log(this.payPwd.length);
        if (this.payPwd.length == 0) {
          return;
        } else if (this.payPwd.length == 1) {
          this.password.num1 = -1;
          this.payPwd = '';
        } else if (this.payPwd.length == 2) {
          this.password.num2 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 3) {
          this.password.num3 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 4) {
          this.password.num4 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 5) {
          this.password.num5 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        } else if (this.payPwd.length == 6) {
          this.password.num6 = -1;
          this.payPwd = this.payPwd.substring(0, this.payPwd.length - 1)
        }
        // console.log(this.payPwd);
      },
      getRegister_ini() {
        // this.isGetCoding = false;
        return tokenGeetestInit().then((data) => {
          // console.log(data);
          if (data.status && data.status == 1) {
          this.startGeetest(data);
        }
      })
      },
      startGeetest(data) {
        // console.log(data);
        initGeetest({
          // 以下配置参数来自服务端 SDK
          gt: data.data.gt,
          challenge: data.data.challenge,
          offline: !data.data.success,
          product: 'bind',
          new_captcha: true
        }, (captchaObj) => {
          // console.log('111' + captchaObj)
          this.captchaObj = captchaObj;
        // captchaObj.onReady(this.captchaReady).onSuccess(this.captchaSuccess);
        captchaObj.onSuccess(this.captchaSuccess);
      })
      },
      captchaReady() {
        this.captchaObj.verify();
      },
      captchaSuccess() {
        if (this.isGetCoding) {
          return;
        }
        this.isGetCoding = true;
        let result = this.captchaObj.getValidate();

        let postData = Object.assign({
          scene: this.scene,
          area: this.area,
          mobile: this.phone
        }, result);
        tokenGetCode(postData).then((data) => {
          // console.log(data);
          this.startCountDown();
          this.isGetCoding = false;
          // this.captchaObj = null;
        }).catch((err) => {
          this.isGetCoding = false;
          this.showToast(err.info, 'warn');
          /*let me = this;
          this.showToast(err.info, 'warn');*/
          // this.captchaObj = null;
        })
      },
      getVerifyCode() {
        if (!this.captchaObj) {
          this.getRegister_ini().catch(e => {
            this.showToast(error.info, 'warn');
          })
          return;
        }
        /*if (this.isGetCoding) {
          return;
        }*/
        this.captchaObj.verify();
      },
      openDeleteModal() {
        if (this.isChecking) {
          return;
        }
        this.isChecking = true;
        deleteCondition(this.minerUid).then((data) => {
          if (data.status && data.status == 1) {
            this.isChecking = false;
            this.joinTimeCondition = data.data.joinTimeCondition;
            this.averageIncomeCondition = data.data.averageIncomeCondition;
            this.nodeNumCondition = data.data.nodeNumCondition;
            this.minerDepositNodeNum = data.data.minerNodeNum;
            if (this.joinTimeCondition == 0 || this.averageIncomeCondition == 0 || this.nodeNumCondition == 0) {
              this.isAbleDelete = false;
            }
            if (this.joinTimeCondition == 1 && this.averageIncomeCondition == 1 && this.nodeNumCondition == 1) {
              this.isAbleDelete = true;
            }
            this.showNotice = true;
          }
        }).catch((err) => {
          this.isChecking = false;
          this.showToast(err.info, 'warn');
        })

      },
      confirmDelete() {
        this.showNotice = false;
        this.need_code = 0;
        this.finishVerification();
      },
      forceDelete() {
        this.showNotice = false;
        this.showMask = true;
        this.showPay = true;
      },
      cancel() {
        this.showNotice = false;
      },
      showToast(msg, type) {
        const toast = this.$createToast({
          time: 2000,
          txt: msg,
          type: type
        });
        toast.show();
      }
    }
  }
</script>

<style lang="scss" scoped>

  .pag {
    background: #F5F5FB;
    height: 100%;
    font-size:30px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .token-title {
    /*display: flex;*/
    width:690px;
    height:226px;
    margin:30px 30px 0 30px;
    padding:32px 24px 0 24px;
    color:#fff;
    background: url("~assets/images/node/minnerprofitbg.png") no-repeat center center;
    background-size: contain;
    .miner-info{
      display:flex;
      align-items:center;
      justify-content:space-between;
      h2{
        font-size:34px;
        font-weight:600;
      }
      p{
        font-size:24px;
        opacity:0.7;
      }
    }
    h3{
      margin:16px 0 37px;
      font-size:26px;
    }
    h1{
      font-size:28px;
      font-weight:600;
      span{
        display:inline-block;
        width:108px;
        height:54px;
        margin-left:32px;
        line-height:54px;
        text-align:center;
        border:1px solid rgba(255,255,255,1);
        border-radius:27px;
        font-size:24px;
        font-weight:400;
        cursor:pointer;
      }
    }
  }

  .action-btn{
    display:flex;
    align-items:center;
    text-align:center;
    background:rgba(66,68,89,1);
    width:100%;
    height:100px;
    font-size:30px;
    color:rgba(242,242,248,1);
    .action-delete{
      flex:1;
      height:100px;
      line-height:100px;
      cursor:pointer;
    }
    .line{
      width:1px;
      height:40px;
      background:rgba(139,142,157,1);
    }
  }


  .refresh-img-rotate{
    animation: img-Rotate 0.8s linear 1 forwards;
  }
  @keyframes img-Rotate {
    0%{
      transform-origin: 50% 50%;
      transform:rotate(0deg);
    }
    50%{
      transform-origin: 50% 50%;
      transform:rotate(180deg);
    }
    100%{
      transform-origin: 50% 50%;
      transform:rotate(360deg);
    }
  }










  .scroll-area{
    /*height:calc(100% - 522px);*/
    /*background:rgba(255,255,255,1);*/
    .mining-type{
      width:690px;
      height:72px;
      line-height:72px;
      margin:30px 30px 0;
      background:rgba(229,229,233,1);
      border-radius:10px 10px 0 0;
      span{
        display:inline-block;
        width:33.33333%;
        height:72px;
        line-height:72px;
        text-align:center;
        cursor:pointer;
        font-size:32px;
        font-weight:400;
        color:rgba(131,136,153,1);
      }
      .selected{
        font-weight:600;
        color:rgba(32,44,91,1);
        background:rgba(255,255,255,1);
        border-radius:10px 10px 0 0;
      }
    }
    .mining-detail{
      width:100%;
      height:88px;
      line-height:88px;
      padding:0 38px;
      background:rgba(255,255,255,1);
      box-shadow:0 1px 2px 0 rgba(10,29,87,0.3);
      span{
        display:inline-block;
        width:33.33333%;
        font-size:28px;
        font-weight:400;
        color:rgba(131,136,153,1);
      }
      span:nth-child(2) {
        text-align:center;
      }
      span:last-child{
        text-align:right;
      }
    }
  }
  .adjust-height{
    /*height:calc(100% - 586px);*/
  }
  .code-content{
    min-height:calc(100vh - 546px);
    margin-top:1px;
    background:#fff;
    /*height:calc(100% - 84px);*/
    .no-result-wrapper{
      position:relative;
      min-height:calc(100vh - 546px);
      /*height:500px;*/
      h2{
        /*padding:12px 0;*/
        position:absolute;
        width:250px;
        height:330px;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
        text-align:center;
        color: #838899;
        font-size:26px;
        img{
          display:block;
          margin:0 auto 20px;
          width:250px;
          height:274px;
        }
      }
    }

  }
  .scroll-list-wrap{
    /*height:100%;*/
    background:#fff;
    padding-bottom:1px;
  }
  .code-item{
    width:690px;
    margin:0 auto;
    /*padding: 12px 0 32px;*/
    padding: 26px 7px 25px;
    border-bottom:1px solid #ECECEC;
    /*box-shadow:0 0 6px 0 rgba(102,102,102,0.3);
    border-radius:14px;*/
    .title{
      display:flex;
      justify-content:space-between;
      align-items:center;
      span{
        width:270px;
        padding:2px 21px 3px 13px;
        background:rgba(23,62,143,0.4);
        border-radius:0 14px 14px 0;
        font-size:24px;
        color:rgba(255,255,255,1);
      }
      i{

        margin-right:74px;
        font-style:normal;
      }
      strong{
        display:inline-block;
        padding:14px 46px 13px;
        background:rgba(23,62,143,1);
        border-radius:10px 0 0 10px;
        font-size:26px;
        color:rgba(255,255,255,1);
        cursor:pointer;
      }
    }
    .detail{
      display:flex;
      /*margin-top:32px;*/
      justify-content:space-between;
      align-items:center;
      /*padding:0 0 0 32px;*/
      >div{
        h3{
          margin-bottom:16px;
          font-size:24px;
          color:rgba(113,118,140,1);
        }
        p{
          font-size:26px;
          color:rgba(32,44,91,1);
        }
        strong{
          display:inline-block;
          padding:14px 47px 13px 45px;
          background:rgba(23,62,143,1);
          border-radius:10px 0 0 10px;
          font-size:26px;
          color:rgba(255,255,255,1);
          cursor:pointer;
        }
      }
      >div:first-child{
        text-align:left;
        min-width:156px;
        p{
          width:214px;
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
          font-size:30px;
          font-weight:600;
        }
      }
      >div:nth-child(2){
        text-align:center;
      }
      >div:nth-child(3){
        text-align:right;
        min-width:190px;
      }
    }
  }


  .mask{
    position:fixed;
    z-index:9991;
    height:100%;
    width:100%;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0, 0, 0, 0.5);

    .general-height{
      /*height: 500px;*/
      height: 67.46vh;
      background:rgba(255,255,255,1);
    }
    .special-height{
      height: 55.46vh!important;
      background:rgba(255,255,255,1);
    }
    .title{
      position:relative;
      padding:29px 0 28px;
      font-size:34px;
      border-bottom:1px solid rgba(245,245,245,1);
      color:#202C5B;
      text-align:center;
      img{
        position:absolute;
        left:30px;
        top:27px;
        width:20px;
        height:34px;
      }
    }
    .number-group{
      position:absolute;
      z-index:9992;
      bottom:0;
      left:0;
      right:0;
      height:448px;
      >div:first-child{
        border-top:1px solid rgba(245,245,245,1);
      }
      .number-btn{
        display:flex;
        div{
          flex:1;
          height:111px;
          line-height:111px;
          font-size:50px;
          color:#333;
          text-align:center;
          border-bottom:1px solid rgba(245,245,245,1);
          border-right:1px solid rgba(245,245,245,1);
          -webkit-tap-highlight-color:rgba(0,0,0,0.15);
        }
        div:active{
          background:rgba(0,0,0,0.15);
        }
        div:last-child{
          border-right:none;
        }
        .no-num{
          background:#e3e7ee;
          img{
            width:44px;
            height:32px;
            display:block;
            margin:40px auto;
          }
        }
      }
    }
    .shopping-detail{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;

      .content{
        margin:97px 30px 0;
        h2{
          margin-bottom:66px;
          text-align:center;
          font-size:30px;
          color:#202C5B;
          font-weight:600;
          span{
            font-size:72px;
          }
        }
        p{
          display:flex;
          justify-content:space-between;
          font-size:28px;
          padding-bottom:29px;
          border-bottom:1px solid #ececec;
          span{
            color:#71768C;
          }
          strong{
            color:#202C5B;
          }
          input{
            width:250px;
            height:84px;
            text-indent:15px;
            background:rgba(248,248,248,1);
            border:1px solid rgba(23,62,143,1);
            border-radius:6px;
          }
        }
        p:last-child{
          margin-top:30px;
        }
        h4{
          font-size:28px;
          text-align:center;
          color:#71768C;
          span{
            color:#EB3257;
          }
        }
      }
      .confirm-content{
        margin:32px 30px 0;
        h1{
          margin-bottom:65px;
          font-size:28px;
          color:#71768C;
          text-align:center;
          span{
            color:#EB3257;
          }
        }
        .number{
          margin-top:30px;
        }
      }
      .official-content{
        p{
          padding-bottom:52px;
          align-items:center;
          border-bottom:none;
        }
        .warn{
          padding:0 30px;
          line-height:1.65;
          font-size:24px;
        }
      }
      .result{
        /*margin-top:97px;*/
        margin-top:45px;
        text-align:center;
        img{
          width:80px;
          height:80px;
          margin-bottom:41px;
        }
        h3{
          margin-bottom:20px;
          font-size:28px;
          color:#202C5B;
        }
        p{
          font-size:24px;
          color:#71768C;
        }
      }
      .pay-btn{
        position:absolute;
        bottom:30px;
        height:84px;
        line-height:84px;
        text-align:center;
        background:rgba(23,62,143,1);
        border-radius:8px;
        color:#fff;
        width:calc(100% - 60px);
        margin:0 30px;
        font-size:34px;
      }
    }
    .pay-password{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;
      .password-wrapper{
        display:flex;
        margin:43px 30px 0;
        height:88px;
        line-height:88px;
        border:1px solid rgba(209,209,209,1);
        border-radius:10px;
        span{
          flex:1;
          text-align:center;
          border-right:1px solid rgba(209,209,209,1);
          strong{
            display:block;
            width:20px;
            height:20px;
            border-radius:50%;
            background:#333;
            margin:34px auto;
          }
        }
        span:last-child{
          border-right:none;
        }
      }
      .forget-password{
        color:#1253FC;
        width:25%;
        padding:12px 0;
        margin:12px auto 0;
        text-align:center;
        font-size:28px;
      }
      .pay-loading{
        position:absolute;
        z-index:9993;
        bottom:0;
        left:0;
        right:0;
        height:calc(100% - 70px);
        background:#fff;
        .paying{
          position:absolute;
          left:50%;
          top:50%;
          transform:translate(-50%, -50%);
          text-align:center;
          font-size:30px;
          color:#4B74E8;
          img{
            display:block;
            width:40px;
            height:40px;
            margin:0 auto 15px;
          }
        }
      }

    }
    .id-check{
      position:fixed;
      width:100%;
      bottom:0;
      left:0;
      right:0;
      .check-title{
        position:relative;
        img{
          position:absolute;
          left:30px;
          top:29px;
          width:34px;
          height:34px;
        }
      }
      .check-content{
        margin-top:32px;
        padding:0 30px;
        p{
          text-align:center;
          color:#202C5B;
          font-size:28px;
          line-height:1.5;
        }
        .node-number-input{
          height:84px;
          line-height:84px;
          margin-top:28px;
          input{
            display:inline-block;
            height:84px;
            line-height:84px;
            width:100%;
            text-indent:22px;
            font-size:30px;
            border-radius:10px;
            border:1px solid rgba(227,227,227,1);
            box-shadow:0 0 0 rgba(0,0,0,0);
            -webkit-appearance:none;
            outline:none;
            background:#F6F7F8;
          }
        }
        .sms-input{
          height:84px;
          line-height:84px;
          margin-top:28px;
          input{
            display:inline-block;
            height:84px;
            line-height:84px;
            width:59.9999%;
            text-indent:22px;
            font-size:30px;
            border-radius:10px 0 0 10px;
            border:1px solid rgba(227,227,227,1);
            border-right:none;
            box-shadow:0 0 0 rgba(0,0,0,0);
            -webkit-appearance:none;
            outline:none;
            background:#F6F7F8;
          }
          span{
            display:inline-block;
            width:39.9999%;
            height:84px;
            line-height:84px;
            border-radius:0 10px 10px 0;
            vertical-align:top;
            background:#D1D1D1;
            color:#fff;
            font-size:30px;
            text-align:center;
            /*border:1px solid rgba(227,227,227,1);
            border-left:none;*/
          }
        }
        .finish-btn{
          height:84px;
          line-height:84px;
          margin-top:32px;
          text-align:center;
          color:#fff;
          font-size:34px;
          border-radius:8px;
          background:rgba(23,62,143,0.5);
        }
        .success{
          background:rgba(23,62,143,1);
        }
      }
    }
    .adjust-bottom{
      bottom:-15px!important;
    }
  }

  .active-ct{
    position:relative;
    width:83vw;
    margin:0 auto;
    /*background:#1E213C;*/
    .content{
      /*background:#1E213C;*/
      /*margin:0 auto;*/
      /*width:602px;*/
      /*width:92vw;*/
      /*height:66.6vh;*/
      /*height:105.33vw;*/
      padding:32px 16px 0;
      margin-bottom:22px;
      -webkit-overflow-scrolling: touch;
      overflow:auto;
      img{
        display:block;
        width:100%;
        min-height:500px;
        height:auto;
        border-radius:6px;
      }
    }
    .close{
      position:absolute;
      z-index:9999;
      width:100%;
      bottom:160px;
      /*margin-top:-390px;*/
      cursor:pointer;
      h2{
        /*margin-top:10px;*/
        font-size:26px;
        font-weight:400;
        color:rgba(113,118,140,1);
        text-align:center;
      }
      p{
        margin-bottom:30px;
        font-size:30px;
        color:#38383E;
        text-align:center;
        img{
          width:42px;
          height:42px;
          margin-right:8px;
          margin-left:8px;
          vertical-align:middle;
        }
      }
      >img{
        width:70.2%;
      }
    }
    .upgrade-member {
      margin: 0 auto 35px;
      width: 638px;
      /*height: 481px;*/
      /*height: 380px;*/
      -webkit-overflow-scrolling: touch;
      overflow: auto;
      background:#fff;
      border-radius:14px;
      h1{
        margin:56px auto 16px;
        padding:0 56px;
        font-size:36px;
        font-weight:600;
        line-height:1.5;
        color:#202C5B;
        text-align:left;
      }
      h2{
        margin-bottom:41px;
        font-size:36px;
        padding:0 56px;
        line-height:1.5;
        text-align:left;
        font-weight:600;
        color:#202C5B;
      }
      .unable-delete{
        margin:56px auto 41px;
      }
      h3{
        // margin:0 auto 80px;
        margin-bottom:10px;
        padding:0 56px;
        /*text-align:center;*/
        font-size:28px;
        line-height:1.5;
        color:#71768C;
        text-align:left;
      }
      .selected{
        color:#DC0630;
      }
      h4{
        font-size:13px;
        text-align:center;
      }
      .delete-cost{
        margin:50px 0 -20px;
        text-align:center;
        h4{
          margin-bottom:23px;
          font-size:28px;
          color:rgba(32,44,91,1);
        }
        h5{
          margin-bottom:23px;
          font-size:40px;
          font-weight:600;
          color:rgba(32,44,91,1);
        }
        p{
          font-size:22px;
          color:rgba(113,118,140,1);
        }
      }
      .submit-btn{
        height:108px;
        line-height:108px;
        width:100%;
        font-size:0;
        margin:75px auto 0;
        border-top:1px solid #D0D4E4;
        text-align:center;
        span{
          display:inline-block;
          width:49.99999%;
          border-radius:5px;
          font-size:30px;
          color:#1253FC;
        }
        span:last-child{
          color:#1253FC;
          border-left:1px solid #D0D4E4;
          /*margin-right:10px;*/
        }
      }
    }
  }

  .backtop {

    position: fixed;
    right: 10px;
    bottom: 120px;
    z-index: 500;
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 46px;
      height: 46px;
      display: block;
    }
  }

  /*.refresh-img-rotate{

    animation: img-Rotate 0.5s linear 1 forwards;
  }
  @keyframes img-Rotate {
    0%{
      transform-origin: 50% 50%;
      transform:rotate(0deg);
    }
    50%{
      transform-origin: 50% 50%;
      transform:rotate(90deg);
    }
    100%{
      transform-origin: 50% 50%;
      transform:rotate(180deg);
    }
  }*/

  .fixed-position{
    position:fixed;
  }
  .static-position{
    position:absolute;
  }

  .fade-enter-active, .fade-leave-active{
    /*opacity:1;
    background: rgba(7, 17, 27, 0.8);*/
    transition: all 0.5s;
    transform:translate(0, 0);
  }
  .fade-enter, .fade-leave-active{
    /*opacity:0;
    background:rgba(7, 17, 27, 0);*/
    transform: translate(0, 100%);
  }
  input::-webkit-input-placeholder{
    color: #B7C3D1;
    font-size:26px;
  }
</style>
<style>
  .cube-toast-tip{
    /*max-width:13em;*/
    font-size:28px;
    max-width:15.5em;
    max-height:6em;
    line-height:40px;
  }
  .cube-toast.cube-popup {
    z-index: 10000!important;
  }
</style>











